<template>
  <div class="outindex">
    <div class="outindex-nav">
      <div class="outindex-nav-box">
        <span class="el-icon-document" style="color: #1296db"></span>
        <div class="outindex-nav-today">
          <span>总订单</span>
          <span>{{ allorder }}</span>
        </div>
      </div>
      <div class="outindex-nav-box">
        <span class="el-icon-coin" style="color: #d4277c"></span>
        <div class="outindex-nav-today">
          <span>总销售额</span>
          <span>{{ allsell }}</span>
        </div>
      </div>
      <div class="outindex-nav-box">
        <span class="el-icon-tickets" style="color: #1296db"></span>
        <div class="outindex-nav-today">
          <span>今日订单数</span>
          <span>{{ todayorder }}</span>
        </div>
      </div>
      <div class="outindex-nav-box">
        <span class="el-icon-s-marketing" style="color: #ff7b7b"></span>
        <div class="outindex-nav-today">
          <span>今日销售额</span>
          <span>{{ todaysell }}</span>
        </div>
      </div>
    </div>
    <div id="myChart"></div>
  </div>
</template>

<script>
// 引入echarts报表
import * as echarts from "echarts";

// 引入echarts数据的报表
import { totaldata } from "@/apis/echartsdata";

export default {
  data() {
    return {
      // 总订单
      allorder: 0,
      // 总销售额
      allsell: 0,
      // 今日订单数
      todayorder: 0,
      // 今日销售额
      todaysell: 0,
    };
  },
  // 要获取节点,所以要在created之后,在mounted之内写
  mounted() {
    // 先发送ajax获取数据,在里面绘制报表
    totaldata().then((res) => {
      // console.log(res);
      // 总订单
      this.allorder = res.data.totalOrder;
      // 总销售额
      this.allsell = res.data.totalAmount;
      // 今日订单数
      this.todayorder = res.data.todayOrder;
      // 今日销售额
      this.todaysell = res.data.totayAmount;
      // 绘制线形图,获取节点,并初始化
      let chartDom = echarts.init(document.getElementById("myChart"));
      // 给这个容器设置setOption,里面放数据对象
      chartDom.setOption({
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "金额数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            data: res.data.orderData,
          },
          {
            name: "金额数据",
            type: "line",
            data: res.data.amountData,
          },
        ],
      });
    });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/themes.less");
.outindex {
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .outindex-nav {
    display: flex;
    margin-bottom: 20px;
    width: 100%;
    justify-content: space-between;
    .outindex-nav-box {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      width: 24%;
      height: 100px;
      padding: 20px 40px;
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .el-icon-document,
      .el-icon-coin,
      .el-icon-tickets,
      .el-icon-s-marketing {
        font-size: 60px;
      }
    }
    .outindex-nav-today {
      display: flex;
      flex-direction: column;
      text-align: center;
      span {
        line-height: 28px;
        font-size: 18px;
      }
      span:first-child {
        color: #ccc;
      }
    }
  }
  .outindex-nav-echarts {
    width: 100%;
    height: 400px;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
  }
  #myChart {
    padding: 20px;
    height: 400px;
    background-color: @tintcolor;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>